<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet_2_0"%>

<portlet:defineObjects />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<div id="map_canvas_map" />

<script>
	$(document).ready(
		function() {
			$("#map_canvas_map").height(2 * $("#map_canvas_map").width() / 3);

			var mapOptions = {
				mapTypeId : google.maps.MapTypeId.TERRAIN
			};

			var map = new google.maps.Map(document.getElementById("map_canvas_map"), mapOptions);
			
			var latLngBounds = new google.maps.LatLngBounds();

			<c:forEach var="device" items="${devices}"> {
				var markerOptions = {
					position : new google.maps.LatLng(${locations[device].latitude}, ${locations[device].longitude}),
					map : map,
					title : "${device.code1} (${device.description}) - ${locations[device].time.time}"
				};

				var marker = new google.maps.Marker(markerOptions);
				
				latLngBounds.extend(markerOptions.position);
			} </c:forEach>
			
			map.fitBounds(latLngBounds);
		}
	);
</script>
